<template>
  <z-paging-swiper safe-area-inset-bottom>
    <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
    <template #top>
      <!-- tab切换 -->
      <view class="head-tab">
        <u-tabs
          :list="headList"
          :current="currentData.index"
          @click="tabClick"
          lineColor="linear-gradient(163deg, #4689F2 0%, #2EF4EE 100%)"
          :inactiveStyle="tableStyle.inactiveStyle"
          :activeStyle="tableStyle.activeStyle"
        ></u-tabs>
      </view>
    </template>
    <view style="height: 100vh; background-color: pink">
      <swiper
        class="swiper"
        :current="currentData.index"
        :duration="50"
        @animationfinish="swiperAnimationfinish"
      >
        <view class="body">
          <swiper-item>
            <news-list></news-list>
          </swiper-item>
          <swiper-item>
            <artical-list></artical-list>
          </swiper-item>
        </view>
      </swiper>
    </view>
  </z-paging-swiper>
</template>

<script setup lang="ts">
import { reactive } from "vue";

import ArticalList from "./components/artical-list.vue";
import NewsList from "./components/news-list.vue";
const currentData = reactive({
  index: 0
});

const tableStyle = {
  activeStyle: {
    //选中
    color: "#1F2329",
    fontWeight: 700,
    fontSize: "28rpx"
  },
  inactiveStyle: {
    //非选中
    color: "#7C90AD",
    fontWeight: 400,
    fontSize: "28rpx"
  }
};

const headList = [
  {
    name: "新闻",
    id: "news111"
  },
  {
    name: "文章",
    id: "artical1111"
  }
];

// 头部点击事件
function tabClick({ index }) {
  currentData.index = index;
}

// swiper滑动结束
function swiperAnimationfinish(e: any) {
  currentData.index = e.detail.current;
}
</script>

<style lang="scss" scoped>
.head-tab {
  background-color: white;
  display: flex;
  justify-content: center;
}
.swiper {
  height: 100%;
}
</style>
